<template>
  <div class="skill">
    <div class="skill-wrapper">
      <loading v-if="!allSkillData" />
      <nodata v-else-if="!allSkillData.length"></nodata>
      <ul v-else>
        <li v-for="data in allSkillData" :key="data._id">
          <div class="skill-data">
            <div class="label" @click="gotoSkillPage(data._id)">
              <h2>{{data.label}}</h2>
              <span>{{data.updated | setDate}}</span>
            </div>
            <div v-if="data.tags[0]" class="tags">
              <el-tag size="small" v-for="tag in data.tags" :key="tag.id" v-if="tag">{{tag}}</el-tag>
              <div v-if="data.hot" class="hot">
                <span>热</span>
              </div>
            </div>
          </div>
          <div class="user-data">
            <div class="cover">
              <img :src="data.user[0].coverUrl | squareUrls" alt />
            </div>
            <div class="text">
              <h4>{{data.user[0].name}}</h4>
              <div class="number">
                <span>
                  文章数：
                  <i>{{data.user[0].skillNumber}}</i>
                </span>
                <span>
                  点击量：
                  <i>{{data.watch}}</i>
                </span>
                <span>
                  评论数：
                  <i>{{data.comment.length + data.childComment.length}}</i>
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "Vuex";
export default {
  name: "skill",
  data() {
    return {
      id: "",
      skillLimit: 20,
      skillSkip: 0
    };
  },
  watch: {
    $route(now) {
      if (now.name !== "blog_skill_id") {
      } else {
        this.setAllSkillData("");

        if (this.id === now.params.id) {
          this.getAllSkillData({
            type: this.id,
            limit: this.skillLimit,
            skip: this.skillSkip
          });
        } else {
          this.id = now.params.id;
        }
      }
    },
    id() {
      this.getAllSkillData({
        type: this.id,
        limit: this.skillLimit,
        skip: this.skillSkip
      });
    }
  },
  computed: {
    ...mapState("user", ["allSkillData"])
  },
  mounted() {
    this.id = this.$route.params.id;
  },
  methods: {
    gotoSkillPage(_id) {
      this.$router.push(`/article/${_id}`);
    },
    ...mapActions("user", ["getAllSkillData"]),
    ...mapMutations("user", ["setAllSkillData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.skill
  width: 100%
  .skill-wrapper
    width: 100%
    >ul
      width: 100%
      background-color: #fff
      padding: 2%
      >li
        width: 100%        
        border-bottom: 1px solid #eee
        padding: 1% 0
        .skill-data
          width: 100%
          .label
            width: 100%
            height: 40px
            line-height: 40px
            cursor: pointer
            @include flex(space-between,center)
            h2
              color: #333 
          .tags
            width: 100%
            height: 40px
            position: relative
            @include flex(flex-start,center)
            .el-tag
              margin-right: 10px
            .hot
              width: 30px
              height: 20px
              border: 1px solid #eb2001
              border-radius: 5px
              position: absolute
              right: 0
              @include flex(center,center)
        .user-data
          width: 100%
          @include flex(space-between,center)
          .cover
            flex: 0 0 36px
            height: 36px
            overflow: hidden
            border-radius: 5px
            @include flex(center,center)
            img
              width: 100%
              height: auto
          .text
            flex: 1
            padding: 0 10px
            h4
              line-height: 26px
              height: 26px
              overflow: hidden
            .number
              @include flex(space-between,center)
              height: 20px
              width: 100%
              >span
                display: block
                >i
                  color: #eb2001  
        &:last-child
          border: none              
</style>